<template>
    <div class="app-container">
        <el-form label-width="80px">

            <el-form-item label="父菜單ID">
                <el-input v-model="menu.parentId" disabled></el-input>
            </el-form-item>
            <el-form-item label="菜單組ID">
                <el-input v-model="menu.groupId" disabled></el-input>
            </el-form-item>
            <el-form-item label="名称">
                <el-input v-model="menu.name"></el-input>
            </el-form-item>
            <el-form-item label="类型">
                <el-select v-model="menu.type">
                    <el-option value="1">不跳转</el-option>
                    <el-option value="2">内部路由跳转</el-option>
                    <el-option value="3">外部跳转</el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="备注">
                <el-input v-model="menu.remark"></el-input>
            </el-form-item>
            <el-form-item label="URL">
                <el-input v-model="menu.url"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="add()">添加</el-button>
                <el-button @click="back()">返回</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import {Message, MessageBox} from 'element-ui'
    import menuApi from '../../api/menu'

    export default {
        name: "menu-add",
        props:['groupId','parentId'],
        data:function () {
            return {
                menu:{
                    groupId:null,
                    parentId:null,
                    name:'',
                    type:null,
                    url:'',
                }
            }
        },
        mounted:function () {
            const _this = this;
            _this.menu.groupId = _this.groupId;
            _this.menu.parentId = _this.parentId;
        },
        methods:{
            add:function () {
                const _this = this;
                menuApi.add(_this.menu)
                    .then(function (data) {
                        console.log(data)
                        if (data.success){
                            Message.success('添加菜单成功')
                            return
                        }
                        Message.error('添加菜单失败')
                    }).catch(function () {
                        Message.error('添加菜单失败')
                    })
            },
            back:function () {
                this.$router.back(-1);
            }
        }
    }
</script>

<style scoped>

</style>
